
<script lang="ts" setup>
import {createBEM} from "/@/utils/bem";
import {useSearch} from "/@/layouts/portal/header/TopBar/index";
import { UserOutlined } from '@ant-design/icons-vue'
import { UsergroupAddOutlined } from '@ant-design/icons-vue'
import LOGO from '/@/assets/logo.png'
const [bem] = createBEM('top-bar');

const {onSearch,keyword} = useSearch()
import {useUserStore} from "/@/store/modules/user";
import {computed} from "vue";

const {getToken,getUserInfo} = useUserStore();
const isLogin = computed(() => !!getToken)

</script>

<template>
  <div :class="bem()">
    <div :class="[bem('top')]">
      <div :class="bem('top-body')">
        <div :class="bem('top-body-left')">
          欢迎访问yaolong门户开发模板网站！
        </div>
        <div :class="bem('top-body-right')">
          <ul>
            <li v-if="isLogin">
              <span style="cursor: pointer">欢迎您！{{getUserInfo?.realName}}</span>
            </li>

            <li v-if="!isLogin">
              <RouterLink to="/login"><user-outlined/> 登录</RouterLink>
            </li>
            <li v-if="!isLogin">
              <RouterLink to="/register"><usergroup-add-outlined /> 注册</RouterLink>
            </li>

            <li v-if="isLogin">
              <RouterLink :to="getUserInfo?.homePath"><fund-projection-screen-outlined /> 控制台</RouterLink>
            </li>
            <li>
              <RouterLink to="/">留言</RouterLink>
            </li>
            <li>
              <RouterLink to="/">反馈</RouterLink>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <div :class="[bem('bottom')]">
      <div :class="bem('bottom-body')">
        <div :class="bem('bottom-body-left')">
          <img
              :src="LOGO"
          />
        </div>
        <div :class="bem('top-body-right')">
          <a-input-search
              v-model:value="keyword"
              enter-button
              placeholder="请输入搜索内容"
              style="width: 300px"
              @search="onSearch"
          />
        </div>
      </div>


    </div>
  </div>
</template>


<script lang="ts">
export default {
  name: "TopBar"
}
</script>




<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-top-bar';
@top-bar-height: 140px;
@top-height: 40px;
@bottom-height: 100px;
.@{prefix-cls} {
  width: 100%;
  min-width: @layout-main-width;
  height: @top-bar-height;

  &__top {
    height: @top-height;
    background-color: @layout-header-top-bg-color;
    min-width: @layout-main-width;

    &-body {
      margin: 0 auto;
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;
      width: @layout-main-width;

      &-left {

      }

      &-right {


        ul li {
          padding: 0 10px;
          display: inline-block;

          a {
            cursor: pointer;
            color: @them-font-color;
          }
        }

        ul li:nth-child(1){
          a{
            color: @theme-color !important;
          }
        }
        ul li:nth-child(2){
          a{
            color: @theme-color !important;
          }
        }
      }
    }
  }

  &__bottom {
    height: @bottom-height;
    min-width: @layout-main-width;
    background-color: @layout-header-bottom-bg-color;

    &-body {
      margin: 0 auto;
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;
      width: @layout-main-width;

      &-left {
        img {
          height: 70px;
        }
      }

    }
  }

}

</style>
